<template>
	<view>
		<mescroll-body :sticky="true" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption">
		</mescroll-body>

		<!-- 弹窗 -->
		<u-popup :show="bdpop" mode="center" round="10">
			<view class="qx-box">
				<view v-if="fuserInfo.area_code=='+86'" class="qx-text">{{$t('fandetail').确定拨打电话}}：{{fuserInfo.phone}}？
				</view>
				<view v-if="fuserInfo.area_code!='+86'" class="qx-text">
					{{$t('fandetail').确定拨打国际电话}}：{{fuserInfo.area_code}}
					{{fuserInfo.phone}}{{$t('fandetail').吗受运营商限制请确认您已开通国际长途业务如未开通将拨打失败}}
				</view>

				<view class="qx-bot align-center">
					<view class="qx-btn" style="border-right: 1rpx solid #EEEEEE;" @click="bdclose()">
						{{$t('common').取消}}
					</view>
					<view class="qx-btn" @click="bdconfirm()">{{$t('common').确认}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: false
				},
				upOption: {
					auto: false,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: '已经到底了'
				},

			},
		}
		onLoad(options) {
			this.uid = options.uid
			this.getfansdetailAPI()
			uni.setNavigationBarTitle({
				title: this.$t('fandetail').粉丝详情
			})
			this.lang = uni.getStorageSync('lang').lang //语言
			this.curreny = uni.getStorageSync('currency')
			this.getoveralldataAPI()
			this.getServerData();
		},

		methods: {
			// 打开个人订单状态
			openperStatus() {
				this.pershowStatus = !this.pershowStatus
			},
			// 选择个人订单的状态
			selperStatus(index) {
				this.perstatusActive = index
				this.pershowStatus = false
				// this.fensorderlogAPI()
				this.$utils.debounce(() => {
					this.mescroll && this.mescroll.resetUpScroll()
				}, 500)
			},
			// 打开贡献订单状态
			openconStatus() {
				this.conshowStatus = !this.conshowStatus
			},
			// 选择贡献订单的状态
			selconStatus(index) {
				this.constatusActive = index
				this.conshowStatus = false
				// this.fensordercontAPI()
				this.$utils.debounce(() => {
					this.mescroll && this.mescroll.resetUpScroll()
				}, 500)

			},
			// 备注弹窗打开
			bzShow() {
				this.bzpop = true;
			},

			// 备注弹窗关闭
			async bzHide(val) {
				if (val == 1) {
					// 设置备注
					const res = await this.$api.setuserremark({
						remark: this.bzVal,
						uid: this.uid
					})
					if (res && res.code == 1) {
						this.bzpop = false;
						setTimeout(() => {
							this.fuserInfo.remark = this.bzVal
							this.$utils.msg('备注更改成功')
							this.bzVal = ''
						}, 300)
					}
				} else {
					this.bzpop = false;
					this.bzVal = ''
				}
			},

			// tab
			tabBtn(val) {
				this.tabId = val;
				console.log(this.tabId)
				if (this.tabId == 1) {
					// this.fensordercontAPI()
					// this.getServerData();
					this.getoveralldataAPI()
				}
				if (this.tabId == 2) {
					// this.fensorderlogAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				}
				if (this.tabId == 3) {
					// this.fensordercontAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				}

			},

			// 粉丝数据点击筛选
			xseBtn(val) {
				this.xseId = val;
			},
			// 获取粉丝详情
			async getfansdetailAPI() {
				const res = await this.$api.getfansdetail({
					uid: this.uid
				})
				this.fuserInfo = res.data
				let arr = [{
						img: "../../static/images/fans/icon_jiaru@2x.png",
						text: "加入时间",
						time: this.fuserInfo.create_time || '-'
					},
					{
						img: "../../static/images/fans/icon_shengji@2x.png",
						text: "升级时间",
						time: this.fuserInfo.level_time || '-'
					},
					{
						img: "../../static/images/fans/icon_daoqi@2x.png",
						text: "到期时间",
						time: this.fuserInfo.expire_time || '-'
					},
					{
						img: "../../static/images/fans/icon_zuihxiadan@2x.png",
						text: "最后下单时间",
						time: this.fuserInfo.end_oreder_time || '-'
					},
					// {
					// 	img: "../../static/images/fans/icon_zuihfangwen@2x.png",
					// 	text: "最后访问时间",
					// 	time: this.fuserInfo.updated_at || ''
					// }
				]
				this.timeArr = arr
			},
			// 个人购买记录
			// async fensorderlogAPI() {
			// 	const res = await this.$api.fensorderlog({
			// 		uid: this.uid, //327751
			// 		order_status: this.perstatus[this.perstatusActive].id
			// 	})
			// 	this.perpurre = res.data
			// },
			//贡献购买记录
			// async fensordercontAPI() {
			// 	const res = await this.$api.fensordercont({
			// 		uid: this.uid, //327719
			// 		order_status: this.constatus[this.constatusActive].id
			// 	})
			// 	this.conpurre = res.data
			// },
			// 打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.fuserInfo.phone
				});
			},
			bdconfirm() {
				this.bdpop = false
				this.callPhone()
			},
			bdclose() {
				this.bdpop = false
			},
			// 下拉刷新
			upCallback(page) {
				if (page.num == 1) this.tabId == 2 ? this.perpurre = [] : this.conpurre = []; //如果是第一页需手动制空列表
				this.$api[this.tabId == 2 ? 'fensorderlog' : 'fensordercont']({
					uid: this.uid, //327719
					order_status: this.tabId == 2 ? this.perstatus[this.perstatusActive].id : this
						.constatus[this
							.constatusActive].id,
					page: page.num,
					limit: page.size
				}).then(res => {
					let curPageData = res.data.list; //当前页的数据列表
					console.log(res.data.list)
					let curPageLen = curPageData.length; //当前页的数据长度
					let totalPage = parseInt(res.data.count / 20) + 1; //总页数
					let hasNext = page.num === totalPage ? false : true //根据页数判断是否有下一页
					this.tabId == 2 ? this.perpurre = this.perpurre.concat(curPageData) : this.conpurre =
						this
						.conpurre.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			// 粉丝数据
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// let xsres = {
					// 	series: [{
					// 		data: this.salesStatistics,
					// 	}]
					// };
					// let cjres = {
					// 	series: [{
					// 		data: this.cjfstjArr,

					// 	}]
					// };
					let byxzres = {
						categories: this.categoriesadd,
						series: [{
							name: this.$t('fan').新增销售额,
							data: this.addseriesData
						}, ],
					};
					let byjsres = {
						categories: this.categoriessettl,
						series: [{
							name: this.$t('index').已结算销售额,
							data: this.settlseriesData
						}, ],
					};
					// this.xsetjChart = JSON.parse(JSON.stringify(xsres));
					// this.cjfsChart = JSON.parse(JSON.stringify(cjres));
					this.byxzChart = JSON.parse(JSON.stringify(byxzres));
					this.byjsChart = JSON.parse(JSON.stringify(byjsres));

				}, 500);
			},
			// 销售额画饼图
			async init(data) {
				// chart 图表实例不能存在data里
				this.xsetjOpts.series[0].data = data
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.xsetjOpts)
			},
			//成交粉丝统计
			async initf(data) {
				// chart 图表实例不能存在data里
				this.cjfsOpts.series[0].data = data
				const chart = await this.$refs.chartReff.init(echarts);
				chart.setOption(this.cjfsOpts)
			},
			// 销售额筛序
			xseBtn(val) {
				this.xseId = val;
				if (this.xseId == 0) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.other_f_value || 0,
						}
					]

					this.init(arr);
				}
				if (this.xseId == 1) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.up_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.up_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.up_other_f_value || 0,
						}
					]
					// arr[0].value = this.totalInfo.up_plus_beilv
					// arr[1].value = this.totalInfo.up_operate_beilv
					// arr[2].value = this.totalInfo.up_other_beilv
					this.init(arr);
				}
				if (this.xseId == 2) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.total_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.total_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.total_other_f_value || 0,
						}
					]
					this.init(arr);
				}
			},
			// 等级条件筛选
			djBtn(val) {
				this.djId = val;
				if (this.djId == 0) {
					this.djArr[0].num = this.totalInfo.day_vip
					this.djArr[1].num = this.totalInfo.day_pulsvip
					this.djArr[2].num = this.totalInfo.day_operator_vip
					this.djArr[3].num = this.totalInfo.day_operator_pulsvip
				}
				if (this.djId == 1) {
					this.djArr[0].num = this.totalInfo.moon_vip
					this.djArr[1].num = this.totalInfo.moon_pulsvip
					this.djArr[2].num = this.totalInfo.moon_operator_vip
					this.djArr[3].num = this.totalInfo.moon_operator_pulsvip
				}
				if (this.djId == 2) {
					this.djArr[0].num = this.totalInfo.total_vip
					this.djArr[1].num = this.totalInfo.total_pulsvip
					this.djArr[2].num = this.totalInfo.total_operator_vip
					this.djArr[3].num = this.totalInfo.total_operator_pulsvip
				}

			},
			// 销售统计
			xstjBtn(index) {
				this.xstjId = index
				if (this.xstjId == 0) {
					this.xstjArr[0].num = this.totalInfo.day_plus_num
					this.xstjArr[1].num = this.totalInfo.day_operate_num
				}
				if (this.xstjId == 1) {
					this.xstjArr[0].num = this.totalInfo.plus_num
					this.xstjArr[1].num = this.totalInfo.operate_num
				}
				if (this.xstjId == 2) {
					this.xstjArr[0].num = this.totalInfo.up_operate_num
					this.xstjArr[1].num = this.totalInfo.up_plus_num
				}

			},
			// 成交粉丝统计筛选
			cjtjBtn(val) {
				this.cjtjId = val;
				if (this.cjtjId == 0) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.day_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.day_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 1) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.moon_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.moon_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 2) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.total_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.total_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
			},
			// 余额筛序 -月份
			// fsphYbtn(val) {
			// 	this.fsphYindex = val;
			// 	if (this.fsphYindex == 1) {
			// 		this.month = this.lastMonth
			// 	} else {
			// 		this.month = this.thisMonth
			// 	}
			// 	this.getgoodprefAPI()
			// },
			// 余额筛序 - 套餐
			// fsphTbtn(val) {
			// 	this.fsphTindex = val;
			// 	this.getgoodprefAPI()
			// },
			// 弹窗打开
			tcShow(val) {
				this.tcpop = true;
				this.tcType = val;
			},

			// 弹窗关闭
			tcHide() {
				this.tcpop = false;
			},
			// 粉丝管理-整体数据
			async getoveralldataAPI() {
				const res = await this.$api.getoveralldata({
					uid: this.uid
				})
				this.totalInfo = res.data.data
				this.totalInfo.moon_settl_sell = res.data.data.moon_settl_sell.toLocaleString()
				this.totalInfo.up_moon_settl_sell = res.data.data.up_moon_settl_sell.toLocaleString()
				this.totalInfo.total_sell = res.data.data.total_sell.toLocaleString()
				// 销售额统计
				let arr = [{
						"name": this.$t('common').plus套组,
						"value": this.totalInfo.plus_f_value || 0, //
					},
					{
						"name": this.$t('common').运营商套组,
						"value": this.totalInfo.operate_f_value || 0, //
					},
					{
						"name": this.$t('common').其他,
						"value": this.totalInfo.other_f_value || 0, //
					}
				]
				this.init(arr)

				// 销售统计
				this.xstjArr[0].num = this.totalInfo.day_plus_num
				this.xstjArr[1].num = this.totalInfo.day_operate_num

				this.salesStatistics = arr
				// console.log(this.totalInfo.plus_beilv, this.totalInfo.operate_beilv)
				// console.log(arr)
				// 已结算销售额统计
				this.yjsArr[0].num = this.totalInfo.moon_sell.toLocaleString()
				this.yjsArr[1].num = this.totalInfo.expect_moon_sell.toLocaleString()
				this.yjsArr[2].num = this.totalInfo.expect_seven_sell.toLocaleString()
				this.yjsArr[3].num = this.totalInfo.up_moon_sell.toLocaleString()
				// 等级
				this.djArr[0].num = this.totalInfo.day_vip
				this.djArr[1].num = this.totalInfo.day_pulsvip
				this.djArr[2].num = this.totalInfo.day_operator_vip
				this.djArr[3].num = this.totalInfo.day_operator_pulsvip
				// 活跃度
				this.hydArr[0].num = this.totalInfo.active_5
				this.hydArr[1].num = this.totalInfo.active_4
				this.hydArr[2].num = this.totalInfo.active_3
				this.hydArr[3].num = this.totalInfo.active_2
				this.hydArr[4].num = this.totalInfo.active_1
				// 成交粉丝数
				let arrcj = [{
						"name": this.$t('fan').首购粉丝占,
						"value": this.totalInfo.day_fans_first_num || 0,
					},
					{
						"name": this.$t('fan').复购粉丝占,
						"value": this.totalInfo.day_fans_repeat_num || 0,
					},
				]

				// this.cjfstjArr = arrcj
				this.initf(arrcj)
				// 本月新增
				res.data.add_list.forEach((item, index) => {
					this.categoriesadd.push(item.date)
					this.addseriesData.push(item.total_amt_award)
				})
				// 已结算销售额 
				res.data.settl_list.forEach((item, index) => {
					this.categoriessettl.push(item.date)
					this.settlseriesData.push(item.total_amt_award)
				})
				// this.getServerData();
				setTimeout(() => {
					this.mescroll.endSuccess(res.data, false);
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
	}

	page {
		background: #F5F5F5;
	}

	// 头部
	.head-box {
		background: #F44A42;
		width: 100%;
		padding: 50rpx 30rpx 26rpx;
		display: flex;
		position: relative;

		.head-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			border: 2rpx solid #fff;
			margin-right: 30rpx;
		}

		.head-news {
			padding-top: 8rpx;

			.head-name {
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: bold;
			}

			.head-xj {
				width: 115rpx;
				margin-left: 20rpx;
			}

			.head-bz {
				color: #FFFFFF;
				font-size: 24rpx;
				margin-right: 16rpx;
			}

			.head-bj {
				width: 24rpx;
				height: 24rpx;
			}

			.lable-box {
				margin-top: 24rpx;

				.lable-list {
					padding: 6rpx 16rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					margin: 0 16rpx 0 0;
				}

				.lable-one {
					background: #FFE5E4;
					border: 2rpx solid #F44A42;
					color: #F44A42;
				}

				.lable-two {
					background: #FFF0CC;
					border: 2rpx solid #FD9E37;
					color: #FD9E37;
				}

				.lable-three {
					background: #F0F7E5;
					border: 2rpx solid #70B603;
					color: #70B603;
				}

				.lable-four {
					background: rgba(195, 195, 195, 0.1);
					border: 2rpx solid #B9B9B9;
					color: #B9B9B9;
				}
			}
		}

		.head-phone {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 30rpx;
			top: 75rpx;
		}
	}

	// 数据
	.head-bot {
		padding: 24rpx;

		.bot-con {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx 32rpx 30rpx;

			.bot-c-top {
				height: 160rpx;

				.bot-ct-list {
					width: 50%;
					text-align: center;

					.bot-ct-num {
						font-size: 40rpx;
						font-weight: bold;
					}

					.bot-ct-text {
						font-size: 24rpx;
						margin-top: 16rpx;
					}
				}
			}

			.bot-c-bot {
				// padding: 24rpx 0;
				padding-bottom: 24rpx;

				// border-bottom: 2rpx solid #EEEEEE;
				.bot-cb-list {
					margin-top: 16rpx;

					.bot-cb-icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 24rpx;
					}

					.bot-cb-text {
						width: 180rpx;
						font-size: 24rpx;
					}

					.bot-cb-time {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	// tab
	.tab-box {
		background: #fff;

		.tab-list {
			width: 33.3%;
			text-align: center;
			position: relative;

			.tab-text {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 32rpx;
			}

			.tab-bor {
				width: 60rpx;
				height: 4rpx;
				background: #F44A42;
				border-radius: 100rpx;
				position: absolute;
				left: 50%;
				bottom: 8rpx;
				transform: translate(-50%, 0);
			}

			.tab-ac {
				color: #F44A42;
			}
		}
	}

	// 订单状态
	.ddzt-box {
		justify-content: flex-end;
		height: 84rpx;
		padding: 0 24rpx;

		.ddzt-text {
			font-size: 28rpx;
			margin-right: 16rpx;
		}

		.ddzt-img {
			width: 20rpx;
			height: 10rpx;
		}
	}

	// 列表
	.list-box {
		padding: 0 24rpx;

		// 个人购物记录
		.gr-list {
			.gr-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 32rpx;
				margin-bottom: 24rpx;

				.gr-head {
					height: 72rpx;
					border-bottom: 2rpx solid #EEEEEE;

					.gr-time {
						font-size: 24rpx;
					}
				}

				.gr-bot {
					padding: 24rpx 0 12rpx;
					display: flex;

					.gr-img {
						width: 120rpx;
						height: 120rpx;
					}

					.gr-con {
						width: 518rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-left: 24rpx;

						.gr-name {
							width: 360rpx;
							height: 66rpx;
							font-size: 24rpx;
						}

						.gr-num {
							font-size: 24rpx;
						}

						.gr-price {
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		// 贡献记录
		.gx-list {
			.gx-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 32rpx;
				margin-bottom: 24rpx;

				.gx-head {
					height: 72rpx;
					border-bottom: 2rpx solid #EEEEEE;

					.gx-time {
						font-size: 28rpx;
					}

					.gx-type {
						font-size: 24rpx;
					}
				}
			}

			.gx-bot {
				padding: 0 0 24rpx;

				.gx-list {
					margin-top: 24rpx;

					.gx-text {
						font-size: 24rpx;
					}

					.gx-left {
						width: 120rpx;
						margin-right: 28rpx;
					}

					.gr-tx {
						width: 32rpx;
						height: 32rpx;
						border-radius: 100rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}

	.charts-box {
		width: 260rpx;
		height: 260rpx;
		overflow: hidden;
	}

	// 备注弹窗
	.bz-box {
		width: 600rpx;
		height: 283rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.bz-head {
			font-size: 32rpx;
			font-weight: bold;
			height: 112rpx;
			text-align: center;
			line-height: 112rpx;
		}

		.bz-inp {
			width: 552rpx;
			height: 62rpx;
			font-size: 28rpx;
			background: #F5F5F5;
			margin: 0 auto 28rpx;
			padding: 0 23rpx;
			box-sizing: border-box;
		}

		.bz-btn {
			width: 50%;
			height: 80rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}

	.fstj-h-t-ac {
		background: #FFD9D7;
		border: 2rpx solid #EE6753;
		color: #EE6753;
	}

	.fstj-h-t-noac {
		background: rgba(127, 127, 127, 0.07);
		border: 2rpx solid rgba(127, 127, 127, 0.07);
		color: #999999;
	}

	.qx-box {
		width: 600rpx;
		// height: 246rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.qx-text {
			color: #2A2A2A;
			font-size: 30rpx;
			padding: 56rpx 40rpx;
			text-align: center;
		}

		.qx-bot {
			border-top: 2rpx solid #EEEEEE;

			.qx-btn {
				width: 50%;
				height: 92rpx;
				text-align: center;
				line-height: 80rpx;
				color: #2A2A2A;
				font-size: 30rpx;
			}
		}
	}

	.tc-box {
		width: 650rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 30rpx 20rpx 0;
		position: relative;

		.tc-head {
			.tc-h-icon {
				width: 7rpx;
				margin-right: 16rpx;
			}

			.tc-h-tit {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 12rpx;
			}

			.tc-h-text {
				font-size: 24rpx;
			}
		}

		.tc-con {
			padding: 10rpx 0 0 0;

			.tc-c-head {
				font-weight: bold;
				background: #F8F8F8;
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-list {
				max-height: 530rpx;
				overflow-y: scroll;
			}

			.tc-c-item {
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-text {
				font-size: 24rpx;
				padding: 20rpx 16rpx;
			}

			.tc-c-a {
				width: 160rpx;
			}

			.tc-c-b {
				width: 300rpx;
				border-left: 2rpx solid #EEEEEE;
				border-right: 2rpx solid #EEEEEE;
			}

			.tc-c-c {
				width: 160rpx;
			}
		}

		.tc-bot {
			height: 97rpx;
			text-align: center;
			line-height: 97rpx;
			font-size: 30rpx;
			color: #F44A42;
			border-top: 2rpx solid #EEEEEE;
		}


		.tc-h-gb {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 24rpx;
			top: 34rpx;
		}
	}

	.tc-c-item:nth-child(2n) {
		background: #F8F8F8 !important;
	}

	.tc-c-item:last-child {
		border-bottom: none !important;
	}

	// 整体数据
	.ztsj-box {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 24rpx;

		.ztsj-head {
			padding: 32rpx 0;
			font-size: 30rpx;
			font-weight: bold;
		}

		// 整体状态
		.ztzt-box {
			.ztzt-list {
				width: 50%;
				text-align: center;

				.ztzt-text {
					font-size: 28rpx;
					margin-right: 12rpx;
				}

				.ztzt-icon {
					width: 28rpx;
					height: 28rpx;
				}

				.ztzt-img {
					width: 170rpx;
					height: 170rpx;
					margin-top: 30rpx;
				}
			}
		}

		// 已结算销售额统计
		.yjs-box {
			.yjs-list {
				width: 50%;
				margin-bottom: 40rpx;

				.yjs-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}

				.yjs-num {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		// 粉丝统计
		.fstj-list {
			padding: 40rpx 0;

			.fsth-head {
				.fstj-h-bor {
					width: 6rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.fstj-h-text {
					font-size: 28rpx;
				}
			}

			.fstj-l-item {
				width: 33%;
				text-align: center;
				margin-top: 40rpx;

				.fstj-l-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
					font-weight: bold;
				}

				.fstj-l-num {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}

		// 成交粉丝统计
		.cjtj-box {
			padding: 52rpx 0 40rpx;

			.cjtj-rs {
				font-size: 30rpx;
				font-weight: bold;
			}

			.cjtj-left {

				.cjtj-l-bor {
					width: 16rpx;
					height: 16rpx;
					border-radius: 4rpx;
					margin: 8rpx 12rpx 0 0;
				}

				.cjtj-l-text {
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		// 粉丝商品偏好
		.fsph-box {
			padding: 30rpx 0;

			.fsph-con {
				padding-top: 32rpx;

				.fsph-c-head {
					background: #FEF3E2;
					border-radius: 10rpx 10rpx 0 0;

					.fsph-h-pub {
						// height: 80rpx;
						text-align: center;
						// line-height: 80rpx;
					}
				}

				.fsph-c-bot {
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 10rpx 10rpx 0 0;
					border-bottom: 2rpx solid #EEEEEE;
				}

				.fsph-list {
					width: 100%;
					height: 400rpx;
					overflow-y: scroll;
					background: rgba(127, 127, 127, 0.06);

					.fsph-item {
						text-align: center;
						border-bottom: 2rpx solid #EEEEEE;
					}
				}

				.fsph-l-a {
					width: 96rpx;
					font-size: 24rpx;
				}

				.fsph-l-b {
					width: 410rpx;
					font-size: 24rpx;
					padding: 24rpx 20rpx;
					box-sizing: border-box;
					border-left: 2rpx solid #EEEEEE;
					border-right: 2rpx solid #EEEEEE;
				}

				.fsph-l-c {
					width: 133rpx;
					font-size: 24rpx;
				}


				.fsph-c-list {
					font-size: 24rpx;
				}
			}
		}

		// 按等级、粉丝统计、销售额统计、粉丝商品偏好--tab
		.fstj-h-tab {
			width: 140rpx;
			height: 50rpx;
			color: #999999;
			font-size: 24rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			background: rgba(127, 127, 127, 0.07);
			border: 2rpx solid rgba(127, 127, 127, 0.07);
			margin-left: 12rpx;
		}

		.fstj-h-t-ac {
			background: #FFD9D7;
			border: 2rpx solid #EE6753;
			color: #EE6753;
		}
	}


	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>